<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../leaflet/leaflet.css">
    <script type="text/javascript" src="../leaflet/leaflet.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

</head>
<style>


</style>
<body style="padding: 0;margin: 0" onload="load()">
<div id="map" style="position: absolute;bottom: 0px;top: 0px;width: 100%;"></div>


<script>
    function load() {
        var map = L.map('map', {
            center: [40, 100],
            zoom: 4
        });
        // 影像
        L.tileLayer("http://t{s}.tianditu.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
        }).addTo(map);
        // 地名标注
        L.tileLayer("http://t{s}.tianditu.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
        }).addTo(map);
        // 边界
        L.tileLayer("http://t{s}.tianditu.cn/ibo_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
        }).addTo(map);

    }


</script>
</body>
</html>